<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <script src="ajax.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<button id="add">新增</button>
<button id="look">查询</button>
<table  width="600" border="1">
    <thead>
    <th>ID</th>
    <th>名字</th>
    <th>密码</th>
    </thead>
    <tbody id="signDemo">

    </tbody>
</table>
<div>
    <button type="button" id="left">&lt;</button>
    <span id="pages">

    </span>
    <button type="button" id="right">&gt;</button>
</div>
<script>
    //$(selector).attr(attribute,value) jquery设置属性的值
    //$(selector).attr({attribute:value, attribute:value ...}) 设置多个
$(function () {
    let size = 5;//设置一页显示几个
    let page = 1;//设置页数
    let formData = new FormData();//表单数据对象，即键值对
    formData.append("size", size);//增加参数 类似 name=value
    formData.append("page", page);
    show("login/list.php", showDta);

    function show(url, formData) {//借鉴大佬 jquery的ajax方法
        $.ajax({
            type: "POST",//请求方式
            //请求的媒体类型
            // contentType: "application/x-www-form-urlencoded",//文本
            processData: false,
            contentType: false,
            //请求地址
            url: url,
            //数据
            data: formData,
            // ifModified:true,//仅在服务器数据改变时获取新数据。默认值: false
            dataType: "json", //返回的数据类型
            //请求成功
            success: function (data) {
                if (data.code == 200) {
                    let dataObj = data.data;
                    let count = dataObj.count;
                    let list = dataObj.list;

                    //先删除表格和页码
                    $("#pages").empty();
                    $("#signDemo").empty();

                    //创建列表
                    for (let i = 0; i < size; i++) {
                        if (i < list.length) {
                            $("#tb").append($("<tr></tr>"));
                            for (let key in list[i]) {
                                $("<td>" + list[i][key] + "</td>").appendTo($("#tb>tr:last"));
                            }
                            $("<td><button class='change'>修改</button><button class='del'>删除</button></td>").appendTo($("#tb>tr:last"));
                        }
                    }
                    //创建页码
                    for (let i = 1; i <= Math.ceil(count / size); i++) {
                        $("<button>" + i + "</button>").appendTo($("#pages"))
                    }
                } else {
                    alert(data.msg);
                }

            },
            error: function (data) {
                alert(data.msg);
                // alert(result.msg);
            }
        });
        let logitDemo = document.querySelector("#signDemo");
        // removeAllChild(student);//删除所有子节点
        for (let i = 0; i < dataObj.list.length; i++) {
            let logitDemo = dataObj.list[i];//表示一个学生

            let tr = document.createElement("tr");//创建一行

            let td = document.createElement("td");//创建id单元格
            td.innerText = logitDemo.id;
            td.classList.add("id");
            tr.appendChild(td);//插入id节点

        }
    }
})
</script>
</body>
</html>